<template>
<!-- 3、显示底部图片的单独组件 -->
  <div @click="onClick">
      <div>
        <img :src="index===selectIndex?tabberItem.icon_active:tabberItem.icon" />
      </div>
      <div>
        <div :class="index===selectIndex?'title_active':'title'">{{tabberItem.title}}</div>
      </div>
  </div>
</template>

<script>
export default {
props:{
  item:{
    type:Object
  },
  index:Number,
  selectIndex:Number
},
data(){
  return{
    tabberItem:this.item
  }
},
methods:{
  onClick(){
    this.$router.push(this.tabberItem.path)
    this.$emit('changeSelectIndex',this.index)
  }
}
}
</script>

<style scoped>
.title{
  color: black;
}
.title_active{
  color: red;
}
</style>